<template>
	<view style="background-color: #f1f2f6;height: 100%;">
		<view style="background-color: #fff;">
			<view class="refund-con">
				<text class="explain">退款原因</text>
				<picker @change="reason" :value="index" :range="array" style="display: flex;flex: 1;">
					<view class="uni-input" style="color: #032545;font-size: 28rpx;">{{array[index]}}</view>
				</picker>
				<view class="iconfont icon-gengduo" style="color: #979797;"></view> 
			</view>
		</view>
		<view style="background-color: #fff;">
			<view class="refund-con">
				<text class="explain">退款说明</text>
				<input class="uni-input" placeholder="请详细描述退款原因" style="width: 76%;font-size: 28rpx;color: #032545;" v-model="form.explain" />
			</view>
		</view>
		<view style="background-color: #fff;">
			<view class="refund-con">
				<text class="explain">退款金额</text>
				<text style="font-size: 28rpx;color: #fe8802;">¥ </text>
				<input class="uni-input" placeholder="" disabled style="width: 76%;font-size: 28rpx;color: #fe8802;padding-left: 6rpx;" v-model="orderDetailObj.price" />
			</view>
		</view>
		<view style="background-color: #fff;padding-bottom: 50rpx;">
			<view class="refund-con" style="border-bottom: none;">
				<text class="explain">上传凭证(最多上传3张图片)</text>
			</view>
			<view style="display: flex;">
				<Upload @getImgList="getImgList"></Upload>
			</view>
		</view>
		<view class="btn-con">
			<view class="btn" @click="submitApply">提交申请</view>
		</view>
	</view>
</template>

<script>
	import Upload from '../../components/newUploadImgs.vue'
	import { queryOrder, refundSubmit } from '../../api/index.js'
	export default {
		data() {
			return {
				activeId: '', // 当前活动ID
				orderDetailObj: {}, // 订单详情
				array: ['有事来不了', '宝宝不舒服', '报错课程', '其他'],
				index: 0, // 退款原因默认
				form: {
					explain: '',
					money: ''
				},
				images: []
				
			};
		},
		components: {
			Upload
		},
		onLoad(option) {
			console.log(this.imgList)
			console.log(option)
			this.activeId = option.id
			let data = {id: option.id}
			queryOrder(data, (res) => {
				console.log(res)
				this.orderDetailObj = res.data.order
			})
		},
		methods: {
			getImgList(data) {
				console.log('子组件图片来了')
				this.images = data
				console.log(data)
				console.log('子组件图片来了')
			},
			reason(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				console.log(this.array[this.index])
			},
			// 提交申请
			submitApply() {
				uni.showModal({
				    title: '提示',
				    content: '申请退款后，您的位置将会释放给其他用户，请确认是否退款？',
				    success: (res) => {
				        if (res.confirm) {
				            let data = {
								id: this.activeId,
								type: this.array[this.index],
								remark: this.form.explain,
								images: this.images
							}
							console.log(100258258)
							console.log(data)
							console.log(100258258)
							refundSubmit(data, (res) => {
								uni.showToast({
						　　　　　　 title: '申请成功',
						　　　　　　 icon: 'none'
						　　　　 })
								uni.navigateTo({
									url: `/pages/active/payOrderDetail?id=` + this.activeId
								})
							})
							// console.log(this.array[this.index])
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			}
		}
	}
</script>

<style lang="scss">
	.refund-con {
		// background-color: #fff;
		display: flex;
		align-items: center;
		margin: 0 36rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f4f4f4;
		.explain {
			display: flex;
			font-size: 28rpx;
			color: #979797;
			padding-right: 17px;
		}
	}
	.btn-con {
		padding: 0 36rpx;
	}
	.btn {
		height: 90rpx;
		background-image: linear-gradient(-90deg, 
				#fe8700 0%, 
				#ff9e2c 100%), 
			linear-gradient(-89deg, 
				#e95783 0%, 
				#fe93a3 100%), 
			linear-gradient(
				#cb9e5f, 
				#cb9e5f);
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		bottom: 27rpx;
		width: 90%;
	}
	.btn:active {
		opacity: 0.9;
	}
</style>
